<template>
    <view :class="'l-avatar ' + (text || _isHaveUserNickName ? 'l-placement-' + placement : '')" mut-bind:tap="tapAvatar">
        <view
            :class="'l-avatar-image ' + (shape ? 'l-' + shape : '') + ' l-class'"
            v-if="_isHaveUserAvatarUrl || icon || src"
            :style="'width:' + size + 'rpx;height:' + size + 'rpx'"
        >
            <open-data class="open-data" v-if="_isHaveUserAvatarUrl" type="userAvatarUrl" />
            <l-icon v-else-if="icon" :size="iconSize || size * 0.6" :color="iconColor || '#ffffff'" :name="icon" />
            <image v-else-if="src" :src="src" :mode="mode" :style="'width:' + size + 'rpx;height:' + size + 'rpx'" />
        </view>
        <view class="l-avatar-text l-class-text l-text-class" v-if="text || _isHaveUserNickName">
            <open-data class="open-data" v-if="_isHaveUserNickName" type="userNickName" />
            <text class="l-avatar-text-text" v-else-if="text">{{ text }}</text>
        </view>
    </view>
</template>

<script>
import lIcon from '../icon/index';
export default {
    data() {
        return {
            _isHaveUserNickName: false,
            _isHaveUserAvatarUrl: false,
            _iconSize: '',
            _iconColor: '#ffffff'
        };
    },

    externalClasses: ['l-class', 'l-class-text', 'l-text-class'],

    props: {
        icon: String,
        iconColor: {
            type: String,
            default: '#3963BC'
        },
        iconSize: {
            type: String,
            default: '28'
        },
        text: String,
        src: String,
        openData: {
            type: Array
        },
        shape: {
            type: String,
            default: 'circle'
        },
        mode: {
            type: String,
            default: 'scaleToFill'
        },
        size: {
            type: Number,
            default: 120
        },
        placement: {
            type: String,
            default: 'right'
        }
    },

    methods: {
        _initOpenData: function (e) {
            this._isHaveUserAvatarUrl(e);
            this._isHaveUserNickName(e);
        },
        _isHaveUserAvatarUrl: function (e) {
            this.setData({
                _isHaveUserAvatarUrl: -1 !== e.indexOf('userAvatarUrl')
            });
        },
        _isHaveUserNickName: function (e) {
            this.setData({
                _isHaveUserNickName: -1 !== e.indexOf('userNickName')
            });
        },
        tapAvatar: function (e) {
            this.$emit(
                'lintap',
                {
                    detail: e
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },

    created: function () {}
};
</script>
<style>
.l-avatar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.l-avatar-image {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ccc;
    overflow: hidden;
}
.l-avatar-text {
    display: inline-block;
    height: max-content;
    width: max-content;
    font-size: 28rpx;
    color: #45526b;
    line-height: 40px;
}
.open-data {
    width: 100%;
    height: 100%;
}
.l-avatar-text .l-avatar-text-text,
.l-avatar-text .open-data {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
.l-square {
    border-radius: 8rpx;
}
.l-circle {
    border-radius: 50%;
}
.l-placement-left,
.l-placement-right {
    align-items: center;
    justify-content: center;
}
.l-placement-left {
    margin-right: 24rpx;
    flex-direction: row-reverse;
}
.l-placement-left .l-avatar-text {
    margin-right: 24rpx;
}
.l-placement-right {
    flex-direction: row;
}
.l-placement-right .l-avatar-text {
    margin-left: 24rpx;
}
.l-placement-top {
    flex-direction: column-reverse;
}
.l-placement-top .l-avatar-text {
    margin-bottom: 12rpx;
}
.l-placement-bottom {
    flex-direction: column;
}
.l-placement-bottom .l-avatar-text {
    margin-top: 12rpx;
}
</style>
